import About from './about.tsx'
import User from './user.tsx'
import SlowPast from './SlowPast.tsx'
import { useState,useTransition } from 'react'

function UseTransition() {
    const [tab, setTab] = useState('about')
    const [isPending, startTransition] = useTransition()
    const handleClick = (tab: string) => {
        startTransition(() => {
            setTab(tab)
        })
    }
    return (
        <div style={{ margin: '20px'}}>
            <div style={{display:"flex"}}>
                <button onClick={() => handleClick('about')}>about</button>
                <button onClick={() => handleClick('user')}>user</button>
                <button onClick={() => handleClick('slow-past')}>slow-past</button>
            </div>
            <hr/>
            {tab === 'about' && <About/>}
            {tab ==='slow-past' && <SlowPast/>}
            {tab === 'user' && <User/>}
        </div>
    )
}

export default UseTransition